<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
</head>
<style>

    /**
    权重比价方式:
    先看ID选择器个数,ID选择器个数越多,权重越高
    ID选择器一样下,看类选择器,伪类选择器和属性选择器的总个数,总个数越多,权重越高
    类选择器,伪类选择器和属性选择器的总个数一样时,再看元素,伪元素选择器的总个数,总个数越多,权重越高
     如果三者都一样的话,就用后来者居上原则

     注意:行内样式>选择器
     如果加了!important,那么他的优先级是最高的,就算是行内样式也没有用
     我们可以直接将鼠标移到选择器上查看他的特异性(n,x,y)
     */
    #yy {
        color: blue !important;
    }

    .container span#yy {
        color: red;
    }

    div > p > span:nth-child(1) {
        color: green;
    }
</style>
<body>
<div class="container">
    <p>
        <span class="slogan" id="yy" style="color: blueviolet">天下没有学不会的技术!</span>
        <br>
        <span>欢迎同学来学习!</span>
    </p>
</div>
</body>
</html>